<script setup>
import {getCurrentInstance, ref} from "vue";
import {ElCard, ElCol} from "element-plus";

const homepageList = ref([]);

const instance = getCurrentInstance();
if (instance) {
  const global = instance.appContext.config.globalProperties;
  global.$http.get('/public/homepage/queryall')
      .then(resp => {
        console.log(resp.data);
        homepageList.value = resp.data;
      })
      .catch(err => {
        console.error(new Error(err));
      });
}

</script>
<template>
  <div class="poster-container">
    <div class="poster-bg">
      <el-row>
        <el-col
            v-for="(homepage, index) in homepageList.filter(item => item.eachType === 2 && item.id===29) "
            :key="index"
            :span="24"
            class="movie-col"
        >
          <el-card class="movie-card">
            <img
                slot="cover"
                :src="homepage.url"
                alt="movie-poster"
                class="poster"
            >
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col
            v-for="(homepage, index) in homepageList.filter(item => item.eachType === 2 && item.id===30) "
            :key="index"
            :span="24"
            class="movie-col"
        >
          <el-card class="movie-card">
            <img
                slot="cover"
                :src="homepage.url"
                alt="movie-poster"
                class="poster"
            >
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<style scoped>
.poster-container {
  width: 100%;
  min-height: 500px; /* 可根据海报实际尺寸调整 */
  position: relative;
}

/* 卡片样式调整 */
.movie-card {
  width: 100%;
  height: 100%;
  border: none; /* 移除卡片边框 */
  box-shadow: none; /* 移除卡片阴影 */
  padding: 0; /* 取消内边距 */
}

/* 图片样式调整 */
.poster {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例填充容器，可能裁剪部分内容 */
  /* 如需完整显示图片可使用 object-fit: contain; */
  display: block; /* 去除图片底部空白 */
}

/* 列样式调整 */
.movie-col {
  padding: 0 !important; /* 取消列的内边距 */
}

.poster-bg {
  width: 100%;
  height: 100%;
  background-color: #f00; /* 海报背景色，可根据实际海报调整 */
  position: relative;
  overflow: hidden;
}
.buy-ticket {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.ticket-button {
  font-size: 20px;
  padding: 10px 30px;
  border-radius: 25px;
}
</style>